<!DOCTYPE html>
<html>

<head>
    <title>Preview Display</title>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="custom/images/favicon.ico?v=2" />
    <style>
        html,
        body {
            padding: 0px;
            margin: 0px;
        }
    </style>
    <script src='custom/libs/echarts.js'></script>
	<script src="custom/libs/echarts.min.js"></script>
	<script src="custom/libs/china.js"></script>
	<script src="custom/libs/江西.js"></script>
    <script src='custom/configs/htconfig.js'></script>
    <script src='libs/ht.js'></script>
    <script src='libs/ht-edgetype.js'></script>
    <script src='libs/ht-ui.js'></script>
    <script src='libs/ht-vector.js'></script>
    <script>
        var dataModel = new ht.DataModel();
        var tabledata = [
    {
        "time": "2019.03.09-17:03",
        "location": "北京市 东城区",
        "detail": "厕所整体情况良好"
    },
    {
        "time": "2019.03.08-17:03",
        "location": "山东省 临汾市",
        "detail": "厕所整体情况良好"
    },
    {
        "time": "2019.03.07-17:03",
        "location": "浙江省 杭州市",
        "detail": "厕所整体情况良好"
    },
    {
        "time": "2019.03.06-17:03",
        "location": "上海市 浦东区",
        "detail": "厕所整体情况良好"
    },
    {
        "time": "2019.03.05-17:03",
        "location": "广东省 广州市",
        "detail": "厕所整体情况良好"
    },
    {
        "time": "2019.03.04-17:03",
        "location": "山西省  太原市",
        "detail": "厕所整体情况良好"
    },
    {
        "time": "2019.03.03-17:03",
        "location": "河南省 郑州市",
        "detail": "厕所整体情况良好"
    },
    {
        "time": "2019.03.02-17:03",
        "location": "云南省 昆明市",
        "detail": "厕所整体情况良好"
    },
    {
        "time": "2019.03.01-17:03",
        "location": "江苏省 南京市",
        "detail": "厕所整体情况良好"
    },
    {
        "time": "2019.02.028-17:03",
        "location": "黑龙江省 哈尔滨市",
        "detail": "厕所整体情况良好"
    }
];

        function init() {
            graphView = new ht.graph.GraphView(dataModel);
            graphView.addToDOM();
			ht.Default.xhrLoad(GetQueryString('tag'), function (text) {
                var json = ht.Default.parse(text);
                if (json.title) document.title = json.title;
                dataModel.deserialize(json);
                dataModel.getDataByTag('tt2').a({
                    'ht.dataSource': tabledata
                });
				dataModel.getDataByTag('tt3').a({
                    'ht.dataSource': tabledata
                });
                dataModel.getDataByTag('tt2').a({
					'ht.drawRow': s1
				});

                var timer = setInterval(function () {
                    getTableData(timer)
                }, 2000);

            });
        }

        function getTableData(timer) {
            var tmp = tabledata[0];
            tabledata = tabledata.splice(1, tabledata.length);
            tabledata.push(tmp);
            dataModel.getDataByTag('tt2').a({
                'ht.dataSource': tabledata
            });
			 dataModel.getDataByTag('tt3').a({
                'ht.dataSource': tabledata
            });
            dataModel.getDataByTag('tt2').a({
                'ht.drawRow': (dataModel.getDataByTag('tt2').a("ht.drawRow") === s1 ? s2 : s1)
            });
        }

        var s1 = function (g, row, index, rect) {
            if (index % 2 === 1) {
                g.fillStyle = 'rgba(128,157,186,0.1)'
                g.fillRect(rect.x, rect.y, rect.width, rect.height);
            }
        }

        var s2 = function (g, row, index, rect) {
            if (index % 2 === 0) {
                g.fillStyle = 'rgba(128,157,186,0.1)'
                g.fillRect(rect.x, rect.y, rect.width, rect.height);
            }
        }

        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURI(r[2]);
            return null;
        }
    </script>
</head>

<body onload='init()'>
</body>

</html>